<template>
    <div class="group">
        <div>fetch 获取资源的请求</div>
        <button type="button" @click="getRolesPageHandler">get 显示角色分页列表</button>
        <button type="button" @click="postRolesHandler">post 添加角色</button>
        <button type="button" @click="putRolesByRoleId">put 修改角色</button>
        <button type="button" @click="deleteRolesByIds">delete 删除角色</button>
        <button type="button" @click="patchRolesByRoleIdUpdateStatus">patch 修改角色状态</button>

        <ul>
            <li v-for="item in roles" :key="item">{{ item }}</li>
        </ul>
    </div>

</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { getRolesPage, postRoles, putRolesByRoleId, deleteRolesByIds, patchRolesByRoleIdUpdateStatus } from '@/service/study5/demo1'

const roles = ref([])

const getRolesPageHandler = async () => {
    const resJson = await getRolesPage()
    console.log(resJson, 'resJson')
    roles.value = resJson.data.list

}



const postRolesHandler = async () => {
    const resJson = await postRoles()
    console.log(resJson);
}






</script>

<style lang="scss" scoped>
.group {
    margin: 20px;
    padding: 10px;
    border: 3px solid skyblue;
}
</style>